<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table td{
      padding: 5px;
    }
    table{
      margin: 40px auto;
    }
    table,tr,td{
      border: 1px solid #cccccc;
      border-spacing: 0;
      border-collapse: collapse;
    }
    .formDiv{
      margin: 40px auto;
      height: 300px;
      width: 400px;
      border: 1px solid #eeeeee;
      text-align: center;
    }
  </style>
</head>
<body>
  <table id="employeeTable" >
    <tr>
      <td>Name</td>
      <td>Email</td>
      <td>Salary</td>
      <td></td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>tom@tom.com</td>
      <td>5000</td>
      <td><a href="#">Delete</a></td>
      <!-- <td><input type="button" value="Delete"></td> -->
    </tr>
    <tr>
      <td>Jerry</td>
      <td>jerry@sohu.com</td>
      <td>8000</td>
      <td><a href="#">Delete</a></td>
      <!-- <td><input type="button" value="Delete"></td> -->
    </tr>
    <tr>
      <td>Bob</td>
      <td>bob@tom.com	</td>
      <td>10000</td>
      <td><a href="#">Delete</a></td>
      <!-- <td><input type="button" value="Delete"></td> -->
    </tr>
  </table>
  <div id="formDiv" class="formDiv">
		<h4>添加新员工</h4>
		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>
  </div>
  <script type="text/javascript">
  window.onload = function () {
    		/*
		 * 点击超链接以后，删除一个员工的信息
		 */
    
     // 删除函数的提取
    function del () {
      //点击超链接以后需要删除超链接所在的那行
				//这里我们点击那个超链接this就是谁
				//获取当前tr
        var tr = this.parentNode.parentNode
        // 获取要删除这行的员工的名字
        var name = tr.children[0].innerText;
        				
				//删除之前弹出一个提示框
				/*
				 * confirm()用于弹出一个带有确认和取消按钮的提示框
				 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
				 * 如果用户点击确认则会返回true，如果点击取消则返回false
				 */
        var flag = confirm('确认删除'+name+'么？');
        if (flag) {
          tr.parentNode.removeChild(tr)
        }
        /*
				 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
				 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
				 */
        return false;
      }
    //获取所有额超链接
    var aArr = document.getElementsByTagName('a')
    for (var i=0;i<aArr.length;i++) {
      aArr[i].onclick = del
    }

    /*
				 * 添加员工的功能
				 * 	- 点击按钮以后，将员工的信息添加到表格中
				 */

        //为提交按钮绑定一个单击响应函数
    var addEmpButton = document.getElementById('addEmpButton')
    addEmpButton.onclick = function () {
        //获取用户添加的员工信息
        var name = document.getElementById('empName').value
        var email = document.getElementById('email').value
        var salary = document.getElementById('salary').value

        // 创建一个tr
        var tr = document.createElement('tr')
        // 创建四个td
        var nameTd = document.createElement('td')
        var emailTd = document.createElement('td')
        var salaryTd = document.createElement('td')
        var deleteTd = document.createElement('td')
        // 创建一个a标签
        var a = document.createElement('a')
        // 创建四个文本节点
        var name1 = document.createTextNode(name)
        var email1 = document.createTextNode(email)
        var salary1 = document.createTextNode(salary)
        var Delete1 = document.createTextNode('Delete')
        // 把子节点添加到父节点中
        nameTd.appendChild(name1)
        emailTd.appendChild(email1)
        salaryTd.appendChild(salary1)
        a.appendChild(Delete1)
        deleteTd.appendChild(a)
        // 把td添加到tr中
        tr.appendChild(nameTd)
        tr.appendChild(emailTd)
        tr.appendChild(salaryTd)
        tr.appendChild(deleteTd)

        //向a中添加href属性
        a.href = "#";
        
        //为新添加的a再绑定一次单击响应函数
        a.onclick = del;

       //获取table
        var employeeTable = document.getElementById("employeeTable");
        //获取employeeTable中的tbody
        var tbody = employeeTable.getElementsByTagName("tbody")[0];
        //将tr添加到tbodye中
        tbody.appendChild(tr);

    }

  }
  </script>
</body>
</html>